<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>INDEX </title>
	<link href="js/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet">
	<link href="style/main.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="source/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="source/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="source/highcharts/highcharts.js"></script>
	<script type="text/javascript" src="source/highcharts/highcharts-3d.js"></script>
	<script type="text/javascript" src="roads/vue.js"></script>
	<link rel="stylesheet" href="roads/ol.css" type="text/css">
    <script src="roads/ol.js"></script>
     
    <style type="text/css">
    	.cc {
    		position: absolute;
    		left:0;
    		top:52px;
    		width: 100%;
    	 
    		bottom:0;
    	}

    	.sidebar{
    		border-left:1px #ccc solid;
    		overflow-y:auto;
    	}
    </style>
</head>
<body>
<div class="container-fluid p0" style="z-index:99999;">
	<nav class="navbar navbar-default header" role="navigation"> 
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">toggle</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-map-marker"></span> 城市道路路况系统 <span class="badge">Beta</span></a>
	    </div>
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right"  >
				<li><a href=""><span class="glyphicon glyphicon-user"></span> 管理员，你好！</a></li>
				<li class="dropdown">
				<a href="" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> 操作 <span class="caret"></span></a>
					<ul class="dropdown-menu" role="menu">
						<li><a href="" data-toggle="modal" data-target="#sign">用户注册</a></li>
						<li><a href="" data-toggle="modal" data-target="#myModal">用户登录</a></li>
						<li><a href="" data-toggle="modal" data-target="#">注销登录</a></li>
					</ul>
				</li>
			</ul>
			<ul class="nav navbar-nav" id="menu">
				<li><a href="#/track" v-on:click="summary()"><span class="glyphicon glyphicon-eye-open"></span> 城市路况统计</a></li>
				<li><a href="#/play" v-on:click="data()"><span class="glyphicon glyphicon-plane"></span> 道路路况统计</a></li>
				<li><a href="#/play" v-on:click="forecast()"><span class="glyphicon glyphicon-plane"></span> 道路路况预测</a></li>
				<li><a href="#/guide" v-on:click="search()"><span class="glyphicon glyphicon-random"></span> 道路查询</a></li> 
				<li><a href="#/play"><span class="glyphicon glyphicon-globe"></span> </a></li> 
			 
			</ul>
			<form class="navbar-form navbar-left" role="search">
				<div class="form-group">
				<input type="text" class="form-control" placeholder="Search">
				</div>
				<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
			</form>     
	    </div><!-- /.navbar-collapse -->  
	</nav>
</div>

 
<div class="container-fluid cc">
	<div class="row" style=" height:100%">
		<div class="col-md-7 p0"   style="height:100%">
			<div id="map" style="width:100%;height:100%"></div>
		</div>
		 
		<div class="col-md-5 pt15 sidebar" style="height:100%">
			<div id="forecast" v-show="display">
 
 





<div>

	<!-- Nav tabs -->
	<ul class="nav nav-tabs" role="tablist">
		<li role="presentation" class="active"><a href="#home1" aria-controls="home1" role="tab" data-toggle="tab">交通状态数据统计</a></li>
		<li role="presentation"><a href="#profile1" aria-controls="profile1" role="tab" data-toggle="tab">交通流预测</a></li>
	 	<li role="presentation"><a href="#profile2" aria-controls="profile2" role="tab" data-toggle="tab">K-means</a></li>
	</ul>

	<!-- Tab panes -->
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="home1">

			<!--统计-->
				<div  class="panel panel-default" style="margin-top:20px;">
					<div class="panel-heading">今日状态信息</div>
					    	 
				</div>
			<!--统计-->
		</div>
		<div role="tabpanel" class="tab-pane active" id="profile2">

			<!--统计-->
				<div  class="panel panel-default" style="margin-top:20px;">
					<div class="panel-heading">数据清洗</div>
					<div id="clean">

					</div>
				</div>
			<!--统计-->
		</div>
		<div role="tabpanel" class="tab-pane" id="profile1" style="margin-top:20px;">
				<!--forecast-->
					<div  class="panel panel-default">
					  <div class="panel-heading">当前道路信息</div>
					    	<table class="table">
								<tr>
									<th>路名</th>
									<th>采样车辆</th>
									<th>道路状态</th>
								</tr>
								<tr>
									<td>永兴路</td>
									<td>45</td>
									<td>畅通</td>
								</tr>
								</table>
					</div>
					<div class="panel panel-default">
					  <div class="panel-heading">预测参数设定</div>
					  <div class="panel-body">
					    <form class="form-horizontal">
						  <div class="form-group">
						    <label for="inputEmail3" class="col-sm-3 control-label">预测周期</label>
						    <div class="col-sm-9">
						      <div class="checkbox" style="float:left">
						        <label>
						          <input type="checkbox"> 5 min
						        </label>
						      </div>
						      <div class="checkbox" style="float:left;margin-left:10px;">
						        <label>
						          <input type="checkbox"> 10 min
						        </label>
						      </div>
						      <div class="checkbox" style="float:left;margin-left:10px;">
						        <label>
						          <input type="checkbox"> 15 min
						        </label>
						      </div>
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-3 control-label">缓存设置</label>
						    <div class="col-sm-9">
						     <div class="checkbox" style="float:left">
						        <label>
						          <input type="checkbox"> 直接读取缓存
						        </label>
						      </div>
						      <div class="checkbox" style="float:left;margin-left:10px;">
						        <label>
						          <input type="checkbox"> 重新更新缓存
						        </label>
						      </div>
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-3 control-label">聚类条件</label>
						    <div class="col-sm-9">
						      <div class="input-group">
								  <span class="input-group-addon">小于</span>
								  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
								  <span class="input-group-addon">Km时退出</span>
								</div>
						    </div>
						  </div>
						 
						</form>
					  </div>
					</div>
					<div class="panel panel-default" style="border:0">
					  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">开始预测</button> <button type="button" class="btn btn-default">终止计算</button>
					</div>						
				<!--forecast-->
		</div>
	 
	</div>

</div>



 
</div>
			<div id="summary" v-show="display">
	<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#sm-a" aria-controls="sm-a" role="tab" data-toggle="tab">城市道路统计</a></li>
    <li role="presentation"><a href="#sm-b" aria-controls="sm-b" role="tab" data-toggle="tab">最新数据</a></li>
     
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane " id="sm-b">
    	 <table class="table table-striped" style="margin-top:20px;">
			<tr>
				 
				<th>道路</th>
				<th>行驶速度</th>
				<th>采集时间</th>
			</tr>
			<tr v-for="item in speeds">
			 
				<td>{{item.road}}</td>
				<td>{{item.speed}} km/h</td>
				<td>
					{{item.time}}
				</td>
			</tr> 	
			 
		</table>
		 
    </div><!--#tappanel1111111111111111-->
    <div role="tabpanel" class="tab-pane active" id="sm-a">
    	<div  class="panel panel-default" style="margin-top:20px;">
			<div class="panel-heading">基本道路信息</div>
			 	<table class="table">
					<tr>
						<th>城市名</th>
						<th>道路数量</th>
						<th>车辆数量</th>
						 
					</tr>
					<tr>
						<td>杭州</td>
						<td>2047 条</td>
						<td>12518 辆</td>

					</tr>
				</table>
		     
		</div>

		<div  class="panel panel-default" style="margin-top:20px;">
			<div class="panel-heading">当前路况统计</div>
			 	<table class="table">
					<tr>
						<th>无法通行</th>
						<th>拥堵</th>
						<th>正常</th>
						<th>畅通</th>
					</tr>
					<tr>
						<td>43 (13.3%)</td>
						<td>345 (10.7%)</td>
						<td>2315 (72.1%)</td>
						<td>509 (15.9%)</td>
					</tr>
				</table>
		     	<div id="f" style="width:500px;height:280px;"></div>
		</div>
		<div  class="panel panel-default">
			<div class="panel-heading">平均速度曲线</div>
			<div class="panel-body">
				 
			</div>
		     
		</div>
    </div><!--#tappanel1111111111111111-->
    
  </div>

</div>
</div>
			<div id="search" v-show="display">
	<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">按名称查询</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">按坐标查询</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">按条件查询</a></li>
    
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">
    	<form class="form-inline" style="margin:20px 0">
		  <div class="form-group">
		    <label class="sr-only" for="exampleInputEmail3">道路名</label>
		    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="道路名">
		  </div>
		  
		  <button type="submit" class="btn btn-default">搜 索</button>
		</form>
		<table class="table table-striped">
			<tr>
				<th>路名</th>
				<th>道路状态</th>
				<th>操作</th>
			</tr>
			<tr>
				<td>永兴路</td>
				<td>畅通</td>
				<td>
					<a href="">定位</a>
				</td>
			</tr> 	
			<tr>
				<td>永兴路</td>
				<td>畅通</td>
				<td>
					<a href="">定位</a>
				</td>
			</tr> 	
		</table>
		<nav>
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li><a href="#">1</a></li>
		    <li><a href="#">2</a></li>
		  
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
    </div>
    <div role="tabpanel" class="tab-pane" id="profile">
    	<form class="form-inline" style="margin:20px 0">
		  <div class="form-group">
		    <label class="sr-only" for="exampleInputEmail3">经纬度</label>
		    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="经纬度">
		  </div>
		  
		  <button type="submit" class="btn btn-default">搜 索</button>
		</form>
    </div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
   
  </div>

</div>
</div>
			<div id="data" v-show="display">
	<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#data-a" aria-controls="data-a" role="tab" data-toggle="tab">最新车辆数据</a></li>
    <li role="presentation"><a href="#data-b" aria-controls="data-b" role="tab" data-toggle="tab">当日路况统计</a></li>
    <li role="presentation"><a href="#data-c" aria-controls="data-c" role="tab" data-toggle="tab">历史路况统计</a></li>
    
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="data-a">
    	 <table class="table table-striped" style="margin-top:20px;">
			<tr>
				 
				<th>道路</th>
				<th>行驶速度</th>
				<th>采集时间</th>
			</tr>
			<tr v-for="item in speeds">
			 
				<td>{{item.road}}</td>
				<td>{{item.speed}} km/h</td>
				<td>
					{{item.time}}
				</td>
			</tr> 	
			 
		</table>
		 
    </div><!--#tappanel1111111111111111-->
    <div role="tabpanel" class="tab-pane" id="data-b">
    	<div  class="panel panel-default" style="margin-top:20px;">
			<div class="panel-heading">路况分布</div>
			<div class="panel-body">
				<div id="fu" style="width:500px;height:280px;"></div>	
			</div>
		     
		</div>
		<div  class="panel panel-default">
			<div class="panel-heading">平均速度曲线</div>
			<div class="panel-body">
				<div id="speeder" style="width:500px;height:280px;"></div>	
			</div>
		     
		</div>
    </div><!--#tappanel1111111111111111-->
    <div role="tabpanel" class="tab-pane" id="data-c">
    	 
		 fdsaa
		 
    </div><!--#tappanel1111111111111111--> 
   
  </div>

</div>
</div>
		</div><!--#SIDEBAdR-->
	</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document" style="width:800px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">预测结果</h4>
      </div>
      <div class="modal-body">
      <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a href="#a" aria-controls="a" role="tab" data-toggle="tab">预测结果</a></li>
          <li role="presentation" ><a href="#t" aria-controls="t" role="tab" data-toggle="tab">历史概率</a></li>
          <li role="presentation"><a href="#aaa" aria-controls="a" role="tab" data-toggle="tab">阻塞先验概率</a></li>     
          <li role="presentation"><a href="#b" aria-controls="b" role="tab" data-toggle="tab">拥堵先验概率</a></li>       
          <li role="presentation"><a href="#c" aria-controls="c" role="tab" data-toggle="tab">正常先验概率</a></li>    
          <li role="presentation"><a href="#d" aria-controls="d" role="tab" data-toggle="tab">畅通先验概率</a></li>    
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">

            <div role="tabpanel" class="tab-pane active" id="a">

                  
                <div id="shit" style="width:400px;height:300px;margin:0 auto;text-align:center;"></div>
                <h6>预测结果 </h6>
                 <table class="table table-striped">
                  <tr>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr>
                    <td>{{res.a}}%</td>
                    <td>{{res.b}}%</td>
                    <td>{{res.c}}%</td>
                    <td>{{res.d}}%</td>
                  </tr>   
                   
                </table>
                
          </div>

          <div role="tabpanel" class="tab-pane" id="t">
              <h6>历史路况</h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="item in history">
                    <td>{{item.name}}</td>
                    <td>{{item.a[1]}}%</td>
                    <td>{{item.b[1]}}%</td>
                    <td>{{item.c[1]}}%</td>
                    <td>{{item.d[1]}}%</td> 
                  </tr>   
                   
                </table>
          </div>

          <div role="tabpanel" class="tab-pane" id="aaa">

              <h6>天目山路阻塞 </h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="(index, item) in history2.a">
                    <td>{{history[index].name}}</td>
                     <td>{{(item.a*100).toFixed(2)}}%</td>
                     <td>{{(item.b*100).toFixed(2)}}%</td>
                     <td>{{(item.c*100).toFixed(2)}}%</td>
                     <td>{{(item.d*100).toFixed(2)}}%</td>
                  </tr>   
                   
                </table>
            </div>
            <div role="tabpanel" class="tab-pane" id="b">    
                <h6>天目山路拥堵 </h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="(index, item) in history2.b">
                    <td>{{history[index].name}}</td>
                     <td>{{(item.a*100).toFixed(2)}}%</td>
                     <td>{{(item.b*100).toFixed(2)}}%</td>
                     <td>{{(item.c*100).toFixed(2)}}%</td>
                     <td>{{(item.d*100).toFixed(2)}}%</td>
                  </tr>   
              </div>
            <div role="tabpanel" class="tab-pane" id="c">     
                </table>
                <h6>天目山路正常</h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="(index, item) in history2.c">
                    <td>{{history[index].name}}</td>
                     <td>{{(item.a*100).toFixed(2)}}%</td>
                     <td>{{(item.b*100).toFixed(2)}}%</td>
                     <td>{{(item.c*100).toFixed(2)}}%</td>
                     <td>{{(item.d*100).toFixed(2)}}%</td>
                  </tr>   
                   
                </table>
            </div>
            <div role="tabpanel" class="tab-pane" id="d">
                <h6>天目山路畅通 </h6>
                 <table class="table table-striped">
                  <tr>
                    <th>路名</th>
                    <th>阻塞</th>
                    <th>拥堵</th>
                    <th>正常</th>
                    <th>畅通</th>
                  </tr>
                  <tr v-for="(index, item) in history2.d">
                    <td>{{history[index].name}}</td>
                     <td>{{(item.a*100).toFixed(2)}}%</td>
                     <td>{{(item.b*100).toFixed(2)}}%</td>
                     <td>{{(item.c*100).toFixed(2)}}%</td>
                     <td>{{(item.d*100).toFixed(2)}}%</td>
                  </tr>   
                   
                </table>
          </div>
        </div>
          
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
        <button type="button" class="btn btn-primary">确 定</button>
      </div>
    </div>
  </div>
</div>
<script src="roads/main.js"></script>
<script src="roads/js/clean.js"></script>
</body>
</html>